<template>
<transition name='fade'>
  <div class="leavingMsg" v-show='showLeavingMsg'>
					<h2>
							请您留言
							 <span class='closeEval' @click='closeLeaving'></span>
					</h2>
					<p v-text="leading_words"></p>
					<div class="quesition" v-if='quesitionShow'>
							<p>问题类型</p>
									<el-cascader
											:options="options"
											v-model="selectedOptions"
											@change="handleChange">
									</el-cascader>
					</div>
					 <div class="contentBox">
							<div class="contentItem">
											<p><span class='pointerRed'>*</span>问题描述：</p>
							</div>
							<div class="contentItem">
											<textarea :placeholder="describe" v-model="describeMsg"></textarea>
							</div>
					 </div>
					 <div class="contentBox" v-if='emailShow'>
							 <div class="contentItem">
									 <p><span class='pointerRed' v-if='pointerRed'>*</span>邮箱：</p>
							 </div>
							 <div class="contentItem">
									<input type="text" v-model="email">
							 </div>
					 </div>
						<div class="contentBox phone" v-if='phoneShow'>
								 <div class="contentItem">
										 <p><span class='pointerRed' v-if='pointerRedPhone'>*</span>电话：</p>
								 </div>
								 <div class="contentItem">
										<input type="text" v-model="phone">
								 </div>
						 </div>
						<a class='submit' @click='submitMsg' href="javascript:;">提交</a>
  </div>
</transition>

</template>



<script>
import chat from "../libs/chat";
import leavingMsg from "../libs/leavingMsg";

export default {
  name: "leavingmsg",
  data() {
    return {
      showLeavingMsg: false,
      leading_words: "", //当前的留言说明
      describe: "", //请输入您的问题的提示
      describeMsg: "",
      pointerRed: true,
      email: "",
      emailShow: true, //邮箱显示,
      phone: "",
      phoneShow: true,
      pointerRedPhone: true,
      other: "请选择",
      selectedOptions: [],
      quesitionShow: false,
      classification: "", //工单自定义分类
      options: [], //工单自定义列表
      currentId: "", //当前选中自定义分类的当前项
      token: ""
    };
  },
  methods: {
    hasMsg(frameToken) {
      var _self = this;
      this.token = frameToken;
      this.showLeavingMsg = !this.showLeavingMsg;
      leavingMsg.getMsgConfig(frameToken, function(res) {
        let data = res.data;
        console.log(data);
        _self.leading_words = data.leading_words;
        _self.describe = data.describe;
        _self.showLeavingMsg = true;
        //	问题类型(工单分类)id；0-允许客户自行选择分类
        if (data.classify_id === "") {
          _self.quesitionShow = true;
          leavingMsg.getPostmsg(frameToken, function(res) {
            let str = JSON.stringify(res.data)
              .replace(new RegExp("id", "g"), "value")
              .replace(new RegExp("title", "g"), "label")
              .replace(new RegExp(',"children":\\[\\]', "g"), "");
            _self.options = JSON.parse(str);
          });
        } else {
          _self.currentId = data.classify_id;
        }
        if (data.email === 0) {
          _self.emailShow = false;
        } else if (data.email === 1) {
          //必填
          _self.emailShow = true;
          _self.pointerRed = true;
        } else if (data.email === 2) {
          //选填
          _self.emailShow = true;
          _self.pointerRed = false;
        }

        if (data.phone === 0) {
          _self.phoneShow = false;
        } else if (data.phone === 1) {
          _self.pointerRedPhone = true;
        } else if (data.phone === 2) {
          _self.pointerRedPhone = false;
        }
      });
    },
    closeLeaving() {
      this.showLeavingMsg = false;
      this.selectedOptions = [];
      this.describeMsg = "";
      this.email = "";
      this.phone = "";
    },
    //提交信息
    submitMsg() {
      let _self = this;
      let userId = chat.agent().robot.userId;
      let newId = userId.toString().substring(2);
      let cuId = this.currentId[this.currentId.length-1];

      if (_self.describeMsg == null || _self.describeMsg == "") {
        alert("请输入问题描述！");
        return false;
      }
      if (_self.pointerRed) {
        var reg = new RegExp(
          "^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
        ); //正则表达式
        if (_self.email == null || _self.email == "") {
          //输入不能为空
          alert("请输入正确的邮箱地址！");
          return false;
        } else if (!reg.test(_self.email)) {
          //正则验证不通过，格式不对
          alert("邮箱格式不正确，请重新输入!");
          return false;
        }
      }
      if (_self.pointerRedPhone) {
        if (_self.phone == null || _self.phone == "") {
          alert("请输入手机号码！");
          return false;
        }
      }

      // console.log(chat.my().userId,_self.email);
      leavingMsg.updatedConfig(
        chat.my().userName + 'H5客户留言',
        _self.describeMsg,
        chat.my().userId,
        cuId,
        32,
        _self.token,
        function(res) {
          console.log(res);
          if (res.code === 200) {
            _self.currentId = "";
            _self.describeMsg = "";
            _self.selectedOptions = [];
            _self.describeMsg = "";
            _self.showLeavingMsg = false;
          } else {
            alert(res.error);
          }
        }
      );
      if (_self.email && _self.phone) {
        leavingMsg.submitInfor(
          _self.token,
          chat.my().userId,
          chat.my().userName,
          _self.email,
          _self.phone,
          function(res) {
            if (res.code === 200) {
              _self.email = "";
              _self.phone = "";
              _self.showLeavingMsg = false;
            } else {
              alert(res.error);
            }
          }
        );
      } else if (_self.email) {
        leavingMsg.submitInfor(
          _self.token,
          chat.my().userId,
          chat.my().userName,
          _self.email,
          "",
          function(res) {
            if (res.code === 200) {
              _self.email = "";
              _self.showLeavingMsg = false;
            } else {
              alert(res.error);
            }
          }
        );
      } else if (_self.phone) {
        leavingMsg.submitInfor(
          _self.token,
          chat.my().userId,
          chat.my().userName,
          "",
          _self.phone,
          function(res) {
            if (res.code === 200) {
              _self.phone = "";
              _self.showLeavingMsg = false;
            } else {
              alert(res.error);
            }
          }
        );
      }
    },
    handleChange(value) {
      this.currentId = value;
    }
  }
};
</script>



<style scoped>
a {
  text-decoration: none;
  color: #333;
}

.pointerRed {
  color: red;
  font-style: initial;
  margin-right: 0.4rem;
}

.leavingMsg > p {
  text-align: left;
  text-indent: 2em;
  width: 86%;
}

.leavingMsg {
  position: absolute;
  width: 23rem;
  height: 100%;
  border: 1px solid #f1f3f4;
  text-align: center;
  top: 0;
  right: 0;
  background: #fff;
  transition: all linear 0.5s;
  overflow: auto;
}

.leavingMsg h2 {
  font-size: 1em;
  font-weight: 300;
  text-align: left;
  color: #333;
  margin: 0;
  padding: 1rem 0 0 1rem;
  padding-bottom: 0.5rem;
  position: relative;
  background: #fff;
  border-bottom: 1px solid #e6e7e7;
}

.leavingMsg .closeEval {
  display: block;
  width: 1rem;
  height: 1rem;
  right: 1.5rem;
  top: 1rem;
  position: absolute;
  background: url("../assets/CLOSE.png") center center no-repeat;
}

.quesition .el-cascader__label {
  line-height: 3.5rem;
}

.quesition p {
  margin: 0 1rem;
}

.quesition p i,
.contentBox .contentItem p i {
  color: red;
  display: inline-block;
  width: 0.6rem;
}

.contentItem input[type="text"] {
  width: 96%;
  border: 1px solid #eaeaea;
  padding: 0.6rem 0 0.6rem 0.6rem;
  outline: none;
}

.leavingMsg p {
  font-size: 0.78rem;
  /* width: 76%; */
  margin: 1rem auto;
  color: #939799;
}

.contentBox {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
}

.contentBox .contentItem:first-child {
  width: 100%;
  padding: 0 0 0 1rem;
  text-align: left;
  line-height: 2.7rem;
}

.contentBox .contentItem:last-child {
  width: 85%;
  margin: 0.5rem auto;
}

.contentBox .contentItem textarea {
  width: 98%;
  height: 5rem;
  outline: none;
  border: 1px solid #eaeaea;
  resize: none;
  text-indent: 1rem;
}

.contentBox .contentItem textarea::-webkit-input-placeholder {
  font-size: 12px;
}
.contentBox .contentItem textarea:-moz-placeholder {
  /* Firefox 18- */
  font-size: 12px;
}
.contentBox .contentItem textarea::-moz-placeholder {
  /* Firefox 19+ */
  font-size: 12px;
}
.contentBox .contentItem textarea:-ms-input-placeholder {
  font-size: 12px;
}

.contentBox .contentItem p {
  line-height: 1rem;
  margin: 0;
}

.leavingMsg .email {
  margin: 3rem 0;
}

.leavingMsg .email .contentItem {
  line-height: 0;
}

.leavingMsg .email .contentItem:last-child {
  text-align: left;
}

.leavingMsg .email .contentItem:last-child input {
  width: 100%;
  outline: none;
  margin: 0.3rem 0;
  border: none;
  padding: 0.5rem 0;
  text-indent: 1rem;
  border: 1px solid #eaeaea;
}

.submit {
  display: inline-block;
  padding: 0.6rem 0;
  background: #019fdf;
  color: #fff;
  margin: 2rem 0;
  width: 100%;
}

.fade-enter-active,
.fade-leave-active {
  transition: 0.5s all ease;
}

.fade-enter,
.fade-leave-active {
  right: -25rem;
}

.quesition {
  position: relative;
}

.quesition p {
  text-align: left;
  width: 89%;
}

.quesition .msg {
  padding: 0;
  /* max-width: 276px; */
  width: 20.8rem;
  overflow: hidden;
  border: 1px solid #e1e6f5;
  border-radius: 0;
  background-color: #fff;
  list-style: none;
  position: absolute;
  left: 1rem;
  text-align: left;
}

.quesition .msg ul {
  margin: 0;
  height: 40px;
  border-bottom: 1px solid #eff3fa;
  padding: 0 4px 0 0.5rem;
  line-height: 40px;
  font-size: 12px;
  color: #bdc3d1;
}

.quesition span {
  position: relative;
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  border: 0;
  border-radius: 0;
  color: #6d7894;
  width: 85%;
  display: inline-block;
  margin: 0 0 1rem 0;
  /* padding:.5rem 1rem; */
}

.quesition .el-cascader-menu__item {
  width: 100%;
}
</style>
